<%@ page language="java" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@ page isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>山西煤炭现货公路交易系统客户端</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/bootstrap/css/bootstrap.min.css">
<!-- daterange picker -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker-bs3.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/ionicons/css/ionicons.min.css">
<!-- jvectormap -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<!-- Theme style -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/skins/_all-skins.min.css">
<!-- jQuery 2.1.4 -->
<script src="<s:url value="/resources"/>/adminlte/plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="<s:url value="/resources"/>/adminlte/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="<s:url value="/resources"/>/adminlte/dist/js/app.min.js"></script>
<!-- Select2 -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/plugins/select2/select2.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<s:url value="/resources"/>/adminlte/dist/css/AdminLTE.min.css">
<!-- date-range-picker -->
<script src="<s:url value="/resources"/>/adminlte/moment.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/daterangepicker/daterangepicker.js"></script>
<!-- DataTables -->
<script src="<s:url value="/resources"/>/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- Select2 -->
<script src="<s:url value="/resources"/>/adminlte/plugins/select2/select2.full.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/select2/i18n/zh-CN.js"></script>
<!-- 引入 echarts.js -->
<script src="<s:url value="/resources"/>/echarts/echarts.min.js"></script>
<script src="<s:url value="/resources"/>/adminlte/default.js"></script>
<script src="<s:url value="/resources"/>/echarts/myechart/areaChart.js"></script>
<script src="<s:url value="/resources"/>/adminlte/default_settlement.js"></script>
<script src="<s:url value="/resources"/>/adminlte/plugins/jQueryUI/jquery-ui.js"></script>
<script src="<s:url value="/resources"/>/adminlte/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
	 $(function(){  
	    dataTab("dataTab",true,false,false,true,true,false,"<s:url value="/resources"/>/adminlte/dataTabBootstrapCN.json");
	    getSelOptsForSettleOnly("<s:url value="/"/>/settlement/getOptionByHavingSelected","selTradername","tradernames","V_KF_JYS_HTJHJSHZ");
	    loadMenu("${user.roleType}","${menuid}",${menuList});
	    $(".select2").select2();
		lineChart(${pielist},"交易商资金沉淀明细","${dateRange}",${lineList},${lineX},"lineChart");
	 });
	 //查询时，检查交易高名称与查询年月是否填写
	 function check(){
		 if($("#tradernames")[0].value=="-1"){
			 alert("请填写交易商名称！");
	         return false;
	     }
		 var date1 = document.getElementById("startDate").value;
		 var date2 = document.getElementById("endDate").value;
		 
		 if(date1 == ""){
			 document.getElementById("startDate").style.backgroundColor = "red";
			 alert("请填写查询开始年月！");
			 document.getElementById("startDate").focus();
	         return false;
	     }
		 if(date2 == ""){
			 document.getElementById("endDate").style.backgroundColor = "red";
			 alert("请填写查询截止年月！");
			 document.getElementById("endDate").focus();
	         return false;
	     }
		 document.getElementById("startDate").style.backgroundColor = "";
	     document.getElementById("endDate").style.backgroundColor = "";
	     if(date1 != "" && date2 != ""){
	    	 var a1 = date1.split("/");       
			 var b1 = date2.split("/");  
			 var d1 = new Date(a1[0],a1[1]);       
			 var d2 = new Date(b1[0],b1[1]);    
			 if (Date.parse(d1) - Date.parse(d2) > 0) {//a>b          
					alert("请输入正确的年月范围！");
					return false;
			 }
		 }
	     return true;//不写此返回值也行，此时就直接提交了
	    
	 }
</script>
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
<%@ include file="../../header.jsp" %>
<%@ include file="../../sidebar.jsp" %>
<div class="content-wrapper" >
<!-- <iframe src="mtzq_html/classify1.html" name="main" class="iframe" frameborder="0" id="main" width="100%"  scrolling=no></iframe> -->
        <!-- Content Header (Page header) -->
        <div class="content-header">
          <h1>
           交易分析
            <small>交易商资金沉淀明细表
            </small>
          </h1>
          <ol class="breadcrumb">
            <li><a href="<s:url value="/"/>/index.jsp"><i class="fa fa-dashboard"></i>首页</a></li>
            <li><a href="#" id="location1"></a></li>
            <li class="active" id="location2"></li>
          </ol>
        </div>

        <!-- Main content -->
        <div class="content">
         <!-- 查询条件 -->
         <form onsubmit="return check()"  action="<s:url value="/"/>/settlement/capitalDetail" method="post">
         <input type="hidden" value='${selTradername}' name="selTradername" id ="selTradername"/>
          <div class="box box-success">
            <div class="box-header with-border">
              <h3 class="box-title">查询条件</h3>
              <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <!-- <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button> -->
              </div>
            </div><!-- /.box-header -->
            <div class="box-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>交易商名称</label><span class="must"> *</span>
                    <select class="form-control select2" style="width: 100%;"  id="tradernames" name="tradernames"  data-placeholder="请选择买受人结算单位" >
                    </select>
                  </div><!-- /.form-group -->
                </div><!-- /.col -->
                <div class="col-md-6">
                 <div class="form-group">
                    <label>查询年月</label><span class="must"> *</span>
                    <div class="input-group">
                    <div class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                      </div>
                      <input type="text" style="width:40%;padding-left: 17px;height: 32px;border: 1px solid #d2d6de;"  class="" id="startDate" name="startDate" value="${startDate}" onfocus="WdatePicker({dateFmt:'yyyy/MM'})">
                      &nbsp;&nbsp;--&nbsp;&nbsp;<input type="text" style="width:40%;;padding-left: 27px;height: 32px;border: 1px solid #d2d6de;" class="" id="endDate" name="endDate" value="${endDate}" onfocus="WdatePicker({dateFmt:'yyyy/MM'})">
                    &nbsp;&nbsp;&nbsp;
                    </div><!-- /.input group -->
                  </div><!-- /.form group -->
                  
               </div>
                <div class="col-md-6">
                  <div class="form-group">
                  	<label>&nbsp;</label>
                  	 <div class="input-group">
                      <button class="btn btn-primary" id="btn" type="submit">查询</button>
                     </div>
                  </div>
                  </div>
                
              </div><!-- /.row -->
            </div><!-- /.box-body -->
            
          </div><!-- /.box -->
          </form>
          <!-- 数据图 start-->
        <div class="row">
            <div class="col-xs-12">
              <!-- LINE CHART -->
              <div class="box box-info">
                <div class="box-header with-border">
                  <h3 class="box-title">交易商资金沉淀明细(金额单位：万元)</h3>
                  <div class="box-tools pull-right">
                    <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                    <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                  </div>
                </div>
                <div class="box-body">
                  <div class="chart">
                     <div id="lineChart" style="height:250px;width: 80%;"></div>
                  </div>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
              <!-- BAR CHART -->
            </div><!-- /.col (RIGHT) -->
          </div><!-- /.row -->
        <!-- 数据图 end -->
        <div class="box">
                <div class="box-header" style="display:block;text-align: left;padding-left: 10px;">
                  <h3 class="box-title">交易商资金沉淀明细表<c:if test="${oldDate ne ''}">(${oldDate})</c:if></h3>
                  </br></br>
              <span style="padding-left:500px;"><small>金额单位：万元</small></span></br>
                  <div class="box-tools pull-right">
                <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                <!-- <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button> -->
              </div>
                </div><!-- /.box-header -->
                <%--<div class="box-tools pull-right" style="padding-right:10px"><small>金额单位：万元</small></div>
                --%><div class="box-body">
                  <table id="dataTab" class="table-bordered">
		                  <thead>
		                      <tr>
		                        <th  style="text-align: center;height: 40px;width:370px;">企业名称</th>
		                        <th  style="text-align: center;width:70px;">金额</th>
		                        <th  style="text-align: center;width:70px;">时间</th>
		                      </tr>
	                    </thead>
                    <tbody>
                    	 <c:forEach items="${dataList}" var="li">
	                      	 <tr>
	                        	<td style="height: 30px;padding-left: 5px;">${li.accountname}</td>
	                        	<td align="center">${li.money}</td>
	                        	<td align="center">${li.flowdate}</td>
	                        </tr>
	                      </c:forEach>
                    </tbody>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
        </div><!-- /.content -->
      </div><!-- /.content-wrapper -->
</div>  
</body>
</html>
